<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Grid - UIkit tests</title>

        <script src="../_test.js"></script>
        <script src="../../src/js/components/grid.js"></script>
        <style>

            .uk-panel {
                padding: 10px;
                text-align: center;
            }

            :nth-child(8n-7) > .uk-panel { height: 100px; background: rgba(0,0,0,0.1); }
            :nth-child(8n-6) > .uk-panel { height: 120px; background: rgba(0,0,0,0.15); }
            :nth-child(8n-5) > .uk-panel { height: 180px; background: rgba(0,0,0,0.2); }
            :nth-child(8n-4) > .uk-panel { height: 140px; background: rgba(0,0,0,0.25); }
            :nth-child(8n-3) > .uk-panel { height: 200px; background: rgba(0,0,0,0.3); }
            :nth-child(8n-2) > .uk-panel { height: 150px; background: rgba(0,0,0,0.35); }
            :nth-child(8n-1) > .uk-panel { height: 170px; background: rgba(0,0,0,0.40); }
            :nth-child(8n) > .uk-panel { height: 130px; background: rgba(0,0,0,0.45); }

            .equal-height > * > .uk-panel { height: 150px; }

        </style>

        <script>
            // Event logging
            jQuery(function($) {
                var count = 0;
                $('[data-uk-grid]:first').on('beforeupdate.uk.grid afterupdate.uk.grid', function(e) {
                    console.log((count++), e.type);
                });
            });
        </script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Dynamic Grid</h1>

            <h2>Different Heights and Gutter</h2>

            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid="{gutter: 20}">

                <div>
                    <div class="uk-panel">A</div>
                </div>

                <div>
                    <div class="uk-panel">B</div>
                </div>

                <div>
                    <div class="uk-panel">C</div>
                </div>

                <div>
                    <div class="uk-panel">D</div>
                </div>

                <div>
                    <div class="uk-panel">E</div>
                </div>

                <div>
                    <div class="uk-panel">F</div>
                </div>

                <div>
                    <div class="uk-panel">G</div>
                </div>

                <div>
                    <div class="uk-panel">H</div>
                </div>

            </div>

            <p class="uk-text-muted">You can see the events fired by this grid in the console of your browser.</p>

            <h2>Different Widths and No Gutter</h2>

            <div class="equal-height" data-uk-grid>

                <div class="uk-width-small-1-2 uk-width-medium-2-3 uk-width-large-1-2">
                    <div class="uk-panel">A</div>
                </div>

                <div class="uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-4">
                    <div class="uk-panel">B</div>
                </div>

                <div class="uk-width-small-1-1 uk-width-medium-1-3 uk-width-large-1-4">
                    <div class="uk-panel">C</div>
                </div>

                <div class="uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-4">
                    <div class="uk-panel">D</div>
                </div>

                <div class="uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-2">
                    <div class="uk-panel">E</div>
                </div>

                <div class="uk-width-small-1-1 uk-width-medium-1-3 uk-width-large-1-4">
                    <div class="uk-panel">F</div>
                </div>

                <div class="uk-width-small-1-2 uk-width-medium-2-3 uk-width-large-1-2">
                    <div class="uk-panel">G</div>
                </div>

                <div class="uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-2">
                    <div class="uk-panel">H</div>
                </div>

            </div>

            <h2>Filtering</h2>

            <ul id="filter" class="uk-subnav">
                <li class="uk-active" data-uk-filter=""><a href="#">All</a></li>
                <li data-uk-filter="test-a"><a href="#">Test A</a></li>
                <li data-uk-filter="test-b"><a href="#">Test B</a></li>
            </ul>

            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid="{controls: '#filter', filter:'test-a'}">

                <div data-uk-filter="test-a">
                    <div class="uk-panel">A 1</div>
                </div>

                <div data-uk-filter="test-b">
                    <div class="uk-panel">B 2</div>
                </div>

                <div data-uk-filter="test-a">
                    <div class="uk-panel">A 3</div>
                </div>

                <div data-uk-filter="test-b">
                    <div class="uk-panel">B 4</div>
                </div>

                <div data-uk-filter="test-b">
                    <div class="uk-panel">B 5</div>
                </div>

                <div data-uk-filter="test-a">
                    <div class="uk-panel">A 6</div>
                </div>

                <div data-uk-filter="test-b">
                    <div class="uk-panel">B 7</div>
                </div>

                <div data-uk-filter="test-a,test-b">
                    <div class="uk-panel">A+B 8</div>
                </div>

            </div>

            <h2>Sorting</h2>

            <ul id="sort" class="uk-subnav">
                <li class="uk-active" data-uk-sort="test"><a href="#">Character (Asc)</a></li>
                <li data-uk-sort="test:desc"><a href="#">Character (Desc)</a></li>
                <li data-uk-sort="test2"><a href="#">Number (Asc)</a></li>
                <li data-uk-sort="test2:desc"><a href="#">Number (Desc)</a></li>
            </ul>

            <div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-4" data-uk-grid="{controls: '#sort'}">

                <div data-test="a" data-test2="8">
                    <div class="uk-panel">A 8</div>
                </div>

                <div data-test="b" data-test2="7">
                    <div class="uk-panel">B 7</div>
                </div>

                <div data-test="c" data-test2="6">
                    <div class="uk-panel">C 6</div>
                </div>

                <div data-test="d" data-test2="1">
                    <div class="uk-panel">D 1</div>
                </div>

                <div data-test="e" data-test2="5">
                    <div class="uk-panel">E 5</div>
                </div>

                <div data-test="f" data-test2="3">
                    <div class="uk-panel">F 3</div>
                </div>

                <div data-test="g" data-test2="2">
                    <div class="uk-panel">G 2</div>
                </div>

                <div data-test="h" data-test2="4">
                    <div class="uk-panel">H 4</div>
                </div>

            </div>

        </div>
    </body>
</html>
